<template>
	<div class="page">
		<!-- 头部 -->
		<div class="header">
			<div class="header-con">
				<div class="header-back">
					<router-link to="/mines">
						<span class="back">
							<i class="iconfont">&#xe604;</i> back
						</span>
					</router-link>
				</div>
				<div class="header-title" v-html="this.computeTitle"></div>
				<div class="header-mines">
					<i class="iconfont">&#xe633;</i>
					<span v-html="this.computeFlags"></span>
				</div>
			</div>
		</div>
		<!-- 游戏面板 -->
		<div class="body" :style="{filter: this.gameState==3||this.gameState==4 ? 'blur(0.6px)' : 'none'}">
			<div class="board" v-bind:style="this.computeSize" v-drag>
				<div v-for="(piece,index) in this.data" :key="index">
					<span v-on:click="pieceClick(index)" v-bind:class="computepiece(piece)" @contextmenu.prevent>{{piece.html}}</span>
				</div>
				<!-- <piece v-for="(piece,index) in this.collection.data" :key="index"></piece> -->
				<!-- <div><span class="word_1">1</span></div>
				<div><span class="word_2">2</span></div>
				<div><span class="word_3">3</span></div>
				<div><span class="word_4">4</span></div>
				<div><span class="word_5">5</span></div>
				<div><span class="word_6">6</span></div>
				<div><span class="word_7">7</span></div>
				<div><span class="word_8">8</span></div>
				
				<div><span class="icon_query"></span></div>
				<div><span class="icon_blank"></span></div>
				<div><span class="icon_flag_blue"></span></div>
				<div><span class="icon_flag_gray"></span></div>
				<div><span class="icon_mines_gray"></span></div>
				<div><span class="icon_mines_red"></span></div>
				<div><span class="icon_delete_mines"></span></div>
				<div><span class="icon_delete"></span></div> -->
			</div>
		</div>
		<!-- 尾部 -->
		<div class="footer">
			<div class="footer-con">
				<div class="footer-toggle">
					<!-- <i class="iconfont">&#xe633;</i> -->
					<!-- Flag -->
					<!-- <input type="checkbox" class="toggle"> -->
					<input type="checkbox" class="toggle-check" v-model="flagMode" @click="flagModeChange">
				</div>
				<div class="footer-menu">
					<button @click="menuHandle" class="btn-menu iconfont">&#xe664;</button>
				</div>
				<div class="footer-time">{{time}}</div>
			</div>
		</div>
		<div class="popup" v-bind:style="{display: gameState==3||gameState==4 ? 'block' : 'none'}">
			<div class="popup_con">
				<div class="info">
					<ul>
						<li>
							{{gameState==3 ? 'CONGRATULATIONS!' : ''}}{{gameState==4 ? 'TRY AGAIN!' : ''}}
						</li>
						<li>
							<div class="game-result-info">
								<span>消灭炸弹数</span>
								<span>{{resDisMines}}</span>
							</div>
							<div class="game-result-info">
								<span>完成奖励</span>
								<span>{{resCompleteBonus}}</span>
							</div>
							<div class="game-result-info">
								<span>时间奖励</span>
								<span>{{resTimeBonus}}</span>
							</div>
							<div class="game-result-info">
								<span>总分</span>
								<span>{{resScore}}</span>
							</div>
						</li>
						<li class="green" v-on:click="newGame">
							新游戏
						</li>
						<li class="purple">
							<router-link to="/home">Mines</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="popup" v-bind:style="{display: gameState==2 ? 'block' : 'none'}">
			<div class="popup_con">
				<div class="info">
					<ul>
						<li>
							游戏暂停
						</li>
						<li class="merald" v-on:click="continueHandle">
							继续
						</li>
						<li class="green" v-on:click="restart">
							重新开始
						</li>
						<li class="orange" v-on:click="newGame">
							新游戏
						</li>
						<li class="purple">
							<router-link to="/home">Mines</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		{{computeMines}}
	</div>
</template>

<script>
import { mapState, mapGetters } from 'Vuex'
import Axios from "Axios";
export default {
	name: "Play",
	data() {
		return {
			isDrag: false,

			game: 'mines',
			flags: 0,
			flagMode: false,

			config: {},//游戏难度配置(store)
			data: [],//游戏数据(localstorage)
			gameState: 0,//游戏状态(localstorage)//默认游戏状态(0:初始化,1:游戏进行中,2游戏暂停中,3游戏结束玩家win,4游戏借宿)
			level: this.$route.params.level,//游戏难度

			time: '00:00',

			resScore: '',
			resDisMines: '',
			resCompleteBonus: '',
			resTimeBonus: '',
		};
	},
	created() {
		this.init();
	},
	mounted() {
	},
	computed: {
		...mapGetters([
			'getLevel',
			'getUserId',
			'getUserName',
			'getUgId',
		]),
		computeMines() {
			let game = this.game;
			let level = this.level;
			let result = JSON.parse(window.localStorage.getItem(game));//获取本地游戏数据
			if (result) {
				let local = {
					level: this.level,
					gameState: this.gameState,
					flagMode: this.flagMode,
					data: this.data,
					time: this.time,
				}
				result[this.level] = local;
				window.localStorage.setItem(game, JSON.stringify(result));
			}
		},
		/**
		 * 计算容器宽高
		*/
		computeSize() {
			let { x = 0, y = 0, piece = 0 } = this.config || {};
			return { 'width': x * piece + "px", 'height': y * piece + "px" };
		},
		/**
		 * 计算title显示
		 */
		computeTitle() {
			let { x = '', y = '', aliasName = '' } = this.config || {};
			if (!(x && y)) return;
			return aliasName + " " + x + "&times;" + y;
		},
		//计算旗帜 TODO:------------
		computeFlags() {
			let data = this.data;

			let count = 0;
			let { amount = 0 } = this.config || {}
			if (data && data.length) {
				data.map((value) => {
					let { state } = value;
					if (this.gameState == 0 || this.gameState == 2) {
						state == -1 ? count++ : '';
					} else if (this.gameState == 3 || this.gameState == 4) {
						state == 4 || state == 5 ? count++ : '';
					}
				})
				this.flags = amount - count
				return amount - count;
			}

			return this.flags;
		},

	},
	methods: {
		clock() {

			let { m: mNum, s: sNum } = this.parseTime();

			this.timer = setInterval(() => {

				sNum++;

				if (mNum >= 59 && sNum > 59) {
					sNum = 59;
					clearInterval(this.timer)

				} else if (mNum < 59 && sNum > 59) {
					mNum++;
					sNum = 0;
				}
				let mstr = (mNum < 10) ? '0' + mNum : mNum.toString();
				let sstr = (sNum < 10) ? '0' + sNum : sNum.toString();
				this.time = mstr + ':' + sstr;

			}, 1000)
		},
		parseTime() {
			let time = this.time;
			let [m, s] = time.split(':');
			return { m: parseInt(m), s: parseInt(s) }
		},
		paused() {
			clearInterval(this.timer)
		},
		begin() {
			this.clock();
		},
		/**
		 * 插旗揭开模式切换
		 */
		flagModeChange() {
			this.flagMode = !this.flagMode;
		},
		/**
		 * 获取数据,没有则创建数据
		 */
		init() {
			let game = this.game;
			let level = this.level;
			let result = JSON.parse(window.localStorage.getItem(game));//获取本地游戏数据
			let current = result ? result[level] : {};//获取游戏当前难度的游戏数据

			this.config = this.getLevel(level);//获取store中的游戏关卡配置
			this.level = level;

			if (result && current && current.data && current.data.length) {

				let { data, gameState, flagMode, time } = current;

				this.paddingData(data, gameState, flagMode, time)

			} else {
				this.newGame();
			}
			this.computeScore();

		},
		paddingData(data, gameState, flagMode, time) {
			this.data = data;
			this.gameState = gameState;
			this.flagMode = flagMode;
			this.time = time;
			if (gameState == 0) {
				this.begin();
			} else {
				this.paused();
			}
		},
		// 新游戏
		newGame() {
			let { x = 0, y = 0, amount = 0 } = this.config || {};
			let game = this.game;
			let level = this.level;

			let data = this.createData(x, y, amount);
			let gameState = 0;
			let flagMode = false;
			let time = '00:00';

			this.paddingData(data, gameState, flagMode, time);

			let result = JSON.parse(window.localStorage.getItem(game)) || {};//获取本地游戏数据

			let local = { level, data, gameState, flagMode, time: '00:00' };

			result[level] = local;

			window.localStorage.setItem(game, JSON.stringify(result));
		},
		/***
		 * 创建数据
		 */
		createData(x = 0, y = 0, amount = 0) {
			if (x * y > 0) {
				let data = [];//数据
				let sum = x * y;
				for (let i = 0; i < sum; i++) {
					data.push({
						state: 0,
						isMines: amount > 0 ? 1 : 0,
						html: '',
					})
					amount--;
				}
				//打乱数据
				data.sort(function () { return 0.5 - Math.random() });
				//将游戏数据复制分别保存
				for (var i = 0; i < data.length; i++) {
					data[i].index = i
				}
				return data;
			} else {
				return [];
			}
		},
		pieceClick(index) {
			let { gameState, flagMode, data } = this;
			let piece = data[index] || {};
			let { isMines: $isMines, state: $pieceState } = piece;
			if (gameState == 0) {//游戏状态正常
				if (flagMode) {//标记模式
					if ($pieceState <= 0) {
						$pieceState--;
						$pieceState < -2 ? $pieceState = 0 : $pieceState;
						piece.state = $pieceState;
					}
				} else {//揭开模式
					if ($pieceState == 0) {//初始状态
						if ($isMines == 1) {
							console.log("game over")
							this.gameOver(0, index)
						} else {
							this.minesCompute(index);
							this.variance();
						}
					} else {//插旗状态或者疑问状态
						if ($pieceState == -1 || $pieceState == -2) {
							piece.state = 0;
						}
					}
				}
			}
		},
		// 菜单
		menuHandle() {
			this.gameState = 2;
			this.paused();
		},
		// 继续游戏
		continueHandle() {
			this.gameState = 0;
			this.begin();
		},
		// 重新开始本局游戏
		restart() {
			this.gameState = 0;
			this.flagMode = 0;
			this.time = '00:00';
			this.data = this.data.map((value) => {
				value.html = '';
				value.state = 0;
				return value;
			})
			this.begin();
		},
		computeScore() {
			if (this.gameState == 3 || this.gameState == 4) {
				let resScore = 0, resTimeBonus = 0, resCompleteBonus = 0, resDisMines = 0;
				let { amount, timeBonus, completeBonus, dissolveBonus } = this.config;
				let time = this.time;
				let { m: mNum, s: sNum } = this.parseTime();

				this.data.map((value) => {
					let { isMines, state } = value;
					if (isMines && state == 4) {
						resDisMines++;
					}
				})
				if (amount == resDisMines) {
					resTimeBonus = timeBonus - (mNum * 60 + sNum);
					resScore = completeBonus + dissolveBonus + resTimeBonus;
					resCompleteBonus = completeBonus;
				} else {
					resTimeBonus = 0;
					resScore = resDisMines;
					resCompleteBonus = 0;
				}
				this.resDisMines = resDisMines;
				this.resCompleteBonus = resCompleteBonus;
				this.resTimeBonus = resTimeBonus;
				this.resScore = resScore;
			}
		},
		/**
		游戏结束 0:游戏失败,1游戏成功*/
		gameOver(code = 0, currIndex) {
			// 停止时间
			this.paused();

			currIndex ? currIndex : currIndex = null;

			let {
				configid
			} = this.config;

			// let resScore = 0, resTimeBonus = 0, resCompleteBonus = 0, resDisMines = 0;
			let gameData = this.data;

			this.data = this.data.map((value, i) => {
				let { isMines, state } = value;
				let temp = 0;
				if (i == currIndex) {
					temp = 3;
				} else {
					if (isMines) {
						if (state == -2 || state == 0) {
							temp = 2;
						} else if (state == -1) {
							temp = 4;
						}
					} else {
						if (state == -2) {
							temp = 0;
						} else if (state == -1) {
							temp = 5;
						} else if (state == 1) {
							temp = 1;
						}
					}
				}
				value.state = temp;
				return value;
			})
			// 根据code 修改游戏状态
			if (code) {
				console.log("win");
				this.gameState = 3;
			} else {
				console.log("lost");
				this.gameState = 4
			}
			//计算分数
			this.computeScore();

			Axios({
				url: '/apis/scoreAdd',
				params: {
					ugid: this.getUgId,
					configid,
					score: this.resScore,
					duration: this.time,
				}
			}).then(response => {
				console.log(response)
			})

		},
		/**
		* variance 过关检测，插旗计算 
		*/
		variance() {
			let amount = this.config.amount;
			let gameData = this.data;
			let count = 0, flags = 0;
			for (let i = 0; i < gameData.length; i++) {
				let state = gameData[i].state;
				if (state != 1) {
					count++;
				}
				if (state == -1) {
					flags++;
				}
			}
			if (count == amount) {
				this.gameOver(1);
			}
		},

		/**
		 * 计算方块class
		 */
		computepiece(piece) {
			let { state, isMines, html } = piece;
			let flagMode = this.flagMode;
			let word = html ? 'word_' + html : '';
			let stateStr = '';
			switch (state) {
				case -2:// -2 问号
					stateStr = "icon_query"; break;
				case -1:// -1 插了旗帜
					stateStr = "icon_flag_blue"; break;
				case 0:// 0 初始状态 
					stateStr = flagMode ? "icon_flag_gray" : ""; break;
				case 1:// 1 点击后的状态
					stateStr = "icon_blank"; break;
				case 2:// 2 有炸弹，炸弹没有爆炸
					stateStr = "icon_mines_gray"; break;
				case 3:// 3 有炸弹，炸弹爆炸
					stateStr = "icon_mines_red"; break;
				case 4:// 4 有炸弹，插了旗帜
					stateStr = "icon_delete_mines"; break;
				case 5:// 5 没有炸弹，插了旗帜
					stateStr = "icon_delete"; break;
				default:
					stateStr = "";
			}
			return [
				word,
				stateStr,
			]
		},
		// 计算炸弹
		minesCompute(currIndex) {
			let gameData = this.data;
			let { x: panelSizeX, y: panelSizeY } = this.config;

			// 修改当前位置的小方块状态，然后计算
			gameData[currIndex].state = 1;

			compute(currIndex);

			function compute(currIndex) {
				var pieceX = currIndex % panelSizeX;//元素横坐标
				var pieceY = Math.floor(currIndex / panelSizeX);//元素竖坐标	
				var arr = [];
				//左上角坐标
				var leftTop = { "x": pieceX - 1, "y": pieceY - 1 };
				if (leftTop.x >= 0 && leftTop.y >= 0 && gameData[leftTop.x + leftTop.y * panelSizeX].state != 1) {
					arr.push(leftTop);
				}
				// 中上坐标
				var centerTop = { "x": pieceX, "y": pieceY - 1 };
				if (centerTop.y >= 0 && gameData[centerTop.x + centerTop.y * panelSizeX].state != 1) {
					arr.push(centerTop);
				}
				// 右上角坐标
				var rightTop = { "x": pieceX + 1, "y": pieceY - 1 };
				if (rightTop.x < panelSizeX && rightTop.y >= 0 && gameData[rightTop.x + rightTop.y * panelSizeX].state != 1) {
					arr.push(rightTop);
				}
				// 右中坐标
				var rightCenter = { "x": pieceX + 1, "y": pieceY };
				if (rightCenter.x < panelSizeX && gameData[rightCenter.x + rightCenter.y * panelSizeX].state != 1) {
					arr.push(rightCenter);
				}
				//右下角坐标
				var rightBottom = { "x": pieceX + 1, "y": pieceY + 1 };
				if (rightBottom.x < panelSizeX && rightBottom.y < panelSizeY && gameData[rightBottom.x + rightBottom.y * panelSizeX].state != 1) {
					arr.push(rightBottom);
				}
				// 中下坐标
				var centerBottom = { "x": pieceX, "y": pieceY + 1 };
				if (centerBottom.y < panelSizeY && gameData[centerBottom.x + centerBottom.y * panelSizeX].state != 1) {
					arr.push(centerBottom);
				}
				//左下角坐标
				var leftBottom = { "x": pieceX - 1, "y": pieceY + 1 };
				if (leftBottom.x >= 0 && leftBottom.y < panelSizeY && gameData[leftBottom.x + leftBottom.y * panelSizeX].state != 1) {
					arr.push(leftBottom);
				}
				// 左中坐标
				var leftCenter = { "x": pieceX - 1, "y": pieceY };
				if (leftCenter.x >= 0 && gameData[leftCenter.x + leftCenter.y * panelSizeX].state != 1) {
					arr.push(leftCenter);
				}
				//空数组就直接返回
				if (arr.length == 0) return false;
				// 计算周围炸弹数
				var count = 0;
				var x, y, arr1 = [];
				for (var i = 0; i < arr.length; i++) {
					x = arr[i].x;
					y = arr[i].y;
					let gameDataOne = gameData[x + y * panelSizeX];
					if (gameDataOne.isMines == 1) {
						count++;
					}
					if (gameDataOne.state == 0) {
						arr1.push(arr[i]);
					}
				}
				// 周围若有炸弹分别执行相应操作
				if (count) {
					gameData[currIndex].html = count;
				} else {
					if (arr1.length == 0) return false;
					for (var i = 0; i < arr1.length; i++) {
						x = arr1[i].x;
						y = arr1[i].y;
						gameData[x + y * panelSizeX].state = 1;
					}
					for (var i = 0; i < arr1.length; i++) {
						x = arr1[i].x;
						y = arr1[i].y;
						compute(x + y * panelSizeX);
					}
				}
			}
		},
	},
	directives: {
		'drag': {
			inserted: (el, binding) => {
				let oDiv = el;   //当前元素
				let oDivParent = oDiv.parentNode;

				let self = this;  //上下文
				console.log(this)


				var disX = 0, disY = 0, isMove = false;
				oDiv.addEventListener('touchstart', function (e) {
					e.stopPropagation();
					self.isDrag = true;
					isMove = true;
					var touchList;
					if (e.changedTouches.length == 1) {
						var touch = e.changedTouches[0];
						disX = touch.clientX - el.offsetLeft;
						disY = touch.clientY - el.offsetTop;
					}
				})
				document.addEventListener('touchmove', function (e) {
					e.stopPropagation();
					self.isDrag = true;
					if (!isMove) return;
					var touchList;
					if (e.changedTouches.length == 1) {
						var touch = e.changedTouches[0];
						el.style.left = touch.clientX - disX + 'px';
						el.style.top = touch.clientY - disY + 'px';
					}
				})
				document.addEventListener('touchend', function (e) {
					e.stopPropagation();
					self.isDrag = false;
					isMove = false;
				})
				oDiv.onmousedown = function (e) {
					var date = new Date();
					console.log(date.getTime())
					e.stopPropagation();
					//鼠标按下，计算当前元素距离可视区的距离
					let disX = e.clientX - oDiv.offsetLeft;
					let disY = e.clientY - oDiv.offsetTop;
					document.onmousemove = function (e) {
						//通过事件委托，计算移动的距离 
						let l = e.clientX - disX;
						let t = e.clientY - disY;
						//移动当前元素  
						oDiv.style.left = l + 'px';
						oDiv.style.top = t + 'px';
					};
					document.onmouseup = function (e) {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				};

				oDiv.onmouseup = function () {
					var temp = new Date();
					console.log(temp.getTime())
				}
			}
		}
	}
};
</script>

<style scoped lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header,
  .footer {
    width: inherit;
    height: 40px;
    border: 1px solid #48525a;
    border-left: none;
    border-right: none;
    color: azure;
  }
  /*页头部样式*/
  .header-con {
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: row;
    .header-back,
    .header-mines {
      width: 60px;
      height: inherit;
      padding: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .back {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 2px 5px;
      border-radius: 2px;
      background: #545159;
      cursor: pointer;
      color: #fbfbfb;
      > i {
        color: #29f5a6;
      }
    }
    .header-mines {
      > i {
        color: #35e5fb;
      }
      > span {
        margin-left: 5px;
      }
    }
    .header-title {
      height: inherit;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  /*页尾部样式*/
  .footer-con {
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: row;
    .footer-toggle,
    .footer-time {
      width: 60px;
      height: inherit;
      padding: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .footer-toggle {
      .toggle-check {
        width: 60px;
        height: 24px;
        position: relative;
        appearance: none;
        outline: none;
        border-radius: 2px;
        background: #48525a;
        font-size: 11px;
        &:before,
        &:after {
          position: absolute;
          left: 0;
          top: 0;
          height: inherit;
          text-align: center;
          line-height: 24px;
        }
        &:before {
          content: "Flag";
          width: 30px;
          color: #35e5fb;
        }
        &:after {
          content: "OFF";
          width: 30px;
          left: 30px;
          font-weight: bold;
          color: #f44336; /*607D8B*/
        }
        &:checked:after {
          content: "ON";
          color: #ff9800;
        }
      }
    }
    .footer-menu {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn-menu {
        height: 30px;
        width: 30px;
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        appearance: none;
        border: none;
        background: transparent;
        cursor: pointer;
        color: #00bcd4;
        font-size: 20px;
      }
    }
  }
  /*body样式*/
  .body {
    width: inherit;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    .board {
      padding: 1.5px;
      position: absolute;
      // width: 160px;height: 160px;
      background: rgba(107, 107, 107, 0.3);
      > div {
        width: 40px;
        height: 40px;
        padding: 1.5px;
        box-sizing: border-box;
        float: left;
        > span {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(12, 12, 12, 0.8);
          font-weight: bold;
          font-size: 16px;
          color: #fff;
          background-size: 70% 70%;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
      .word_1 {
        color: #ffffff;
      }
      .word_2 {
        color: #4fda55;
      }
      .word_3 {
        color: #0ee4d0;
      }
      .word_4 {
        color: #ff9800;
      }
      .word_5 {
        color: #d601fb;
      }
      .word_6 {
        color: #7629ff;
      }
      .word_7 {
        color: #ff5722;
      }
      .word_8 {
        color: #2196f3;
      }

      .icon_blank {
        background-color: #37353a;
      }
      .icon_flag_blue {
        background-image: url(./../assets/icon_flag_blue.png);
      }
      .icon_flag_gray {
        background-image: url(./../assets/icon_flag_gray.png);
      }
      .icon_mines_gray {
        background-image: url(./../assets/icon_mines_gray.png);
        @extend .icon_blank;
      }
      .icon_mines_red {
        background-image: url(./../assets/icon_mines_red.png);
        @extend .icon_blank;
      }
      .icon_delete {
        background-image: url(./../assets/icon_delete.png);
        @extend .icon_blank;
      }
      .icon_delete_mines {
        background-image: url(./../assets/icon_delete.png),
          url(./../assets/icon_mines_gray.png);
        @extend .icon_blank;
      }
      .icon_query {
        background-image: url(./../assets/icon_query.png);
      }
    }
  }
  .popup {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.2);
    .popup_con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .info {
      width: 60%;
      height: auto;
      color: #fff;
      background: rgba(55, 56, 64, 0.7);
      > ul {
        padding: 10px;
        li {
          width: 80%;
          margin: 10px auto;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #ffffff;
          font-weight: normal;
          cursor: pointer;
          > a {
            color: inherit;
            font-weight: inherit;
          }
        }
      }
      .game-result-info {
        width: 80%;
        padding: 5px;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        // flex-direction:
        background: #2b3542;
        color: #9e9e9e;
      }
      .green {
        height: 40px;
        background: #4caf50;
      }
      .red {
        height: 40px;
        background: #f44336;
      }
      .merald {
        height: 40px;
        background: #009688;
      }
      .orange {
        height: 40px;
        background: #ff9800;
      }
      .purple {
        height: 40px;
        background: #3f51b5;
      }
    }
  }
}
</style>
